import React, {useEffect, useState} from 'react';
import classes from './index.module.scss'
import {Button, Card, Checkbox, Divider, message, Modal, Space} from "antd";
import {reqGetBuyCourseStatus, reqGetCourse, reqGetCourseOrder} from "../../../../api/frontDesk/frontDeskApi";
import {useNavigate, useParams} from "react-router-dom";
import CourseItem from "../../../../component/frontDesk/CourseItem";
import {useSelector} from "react-redux";


var timer = null

const BuyCourse = () => {
    const params = useParams()
    const nav = useNavigate()

    const [course, setCourse] = useState({})
    const [qrcodeOpen, setQrcodeOpen] = useState(false)
    const [codeUrl, setCodeUrl] = useState('')
    //购买按钮
    const [payStatus, setPayStatus] = useState(null)
    const course_id = params.course_id

    const {persistedReducer} = useSelector(state => state)
    const {userAllInfo} = persistedReducer.user


    //获取该课程的信息以及生成订单信息
    useEffect(() => {
        const getCourseAndGetOrder = async () => {
            const {course} = await reqGetCourse(course_id)
            await reqGetCourseOrder(course_id)
            setCourse(course)
        }
        getCourseAndGetOrder()
    }, [])


    //购买按钮
    const pay = async () => {
        try {
            //获取到二维码
            const result = await reqGetBuyCourseStatus({course_id:course_id, user_id: userAllInfo.id})
            setCodeUrl(result.codeUrl)
            timer = setInterval(async () => {
                let {scan} = await reqGetBuyCourseStatus({course_id:course_id, user_id: userAllInfo.id})
                if (scan) {
                    clearInterval(timer)
                    timer = null
                    setQrcodeOpen(false)
                    nav('/pay-success')
                    scan = false
                    message.success('支付成功')
                }
            }, 1000)

        } catch (err) {
            message.error('支付失败!')
        } finally {
            setQrcodeOpen(true)
        }
    }


    const afterClose = async () => {
        clearInterval(timer)
        timer = null
        setQrcodeOpen(false)
    }

    const handleCancel = () => {
        setPayStatus(null)
        setQrcodeOpen(false);
    };


    return (
        <div className={classes.BuyCourseContainer}>
            <Space
                direction="vertical"
                size="middle"
                style={{
                    display: 'flex',
                }}
            >
                <Card>
                    <CourseItem course={course}/>
                </Card>
                <Card title={<h2>商品结算</h2>} className={classes.Settlement}>
                    <div>
                        <div style={{display: 'flex', justifyContent: 'space-between'}}>
                            <span>会员全场7折优惠</span>
                            <span>开通会员</span>
                        </div>
                        <Divider/>
                        <div style={{display: 'flex', justifyContent: 'space-between'}}>
                            <span>优惠券/优惠码</span>
                            <span>开通会员</span>
                        </div>
                        <Divider/>
                        <div style={{display: 'flex', justifyContent: 'space-between'}}>
                            <span>不使用任何优惠</span>
                            <span><Checkbox defaultChecked></Checkbox></span>
                        </div>
                        <Divider/>
                    </div>
                    <div className={classes.Footer}>
                        应付总额：<span className={classes.Price}>￥{course.now_price}</span>
                        <Button onClick={pay} type="primary">立即购买</Button>
                    </div>
                </Card>
                <Modal
                    afterClose={afterClose}
                    open={qrcodeOpen}
                    maskTransitionName=''
                    onCancel={handleCancel}
                    footer={null}
                    centered
                    closable={false}
                    width={300}>
                    <img style={{width: "100%"}} src={codeUrl} alt=''/>
                </Modal>
            </Space>
        </div>
    );
};

export default BuyCourse;